<template>
  <el-dialog title="生产制作单" v-if="infoOpen" :visible.sync="infoOpen" :modal="false" width="1000px">
    <div id="printArea" style="margin-top: -40px;">
      <el-tabs v-model="activeName">
        <div class="work-info">
          <div class="divider-order noprint">
            <span class="label-order">生产制作单</span>
          </div>
          <div class="code">No：{{ proManufactureOrder.moCode }}</div>
          <el-descriptions :column="3" border>
            <el-descriptions-item
                label="客户名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.clientName }}
            </el-descriptions-item>
            <el-descriptions-item
                label="合同号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
              <el-tag type="success">
                {{ proManufactureOrder.contractCode ? proManufactureOrder.contractCode : '暂无' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item
                label="来源类型"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
              <dict-tag :options="dict.type.mes_workorder_sourcetype" :value="proManufactureOrder.orderSource"/>
            </el-descriptions-item>
            <el-descriptions-item
                label="产品名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.productName }}
            </el-descriptions-item>
            <el-descriptions-item
                label="产品编号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
              <el-tag
                  type="success">
                {{ proManufactureOrder.productCode }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item
                label="规格型号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.productSpc }}
            </el-descriptions-item>
            <el-descriptions-item
                label="计划数量"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.quantity }}
            </el-descriptions-item>
            <el-descriptions-item
                label="关联计划"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.planName }}
            </el-descriptions-item>
            <el-descriptions-item
                label="计划编号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
              <el-tag type="success">
                {{ proManufactureOrder.planCode }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item
                label="计划开工日期"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.startDate }}
            </el-descriptions-item>
            <el-descriptions-item
                label="计划完工日期"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.endDate }}
            </el-descriptions-item>
            <el-descriptions-item
                label="需求日期"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.requestDate }}
            </el-descriptions-item>
            <el-descriptions-item
                label="计划类型"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
              <dict-tag :options="dict.type.mes_workorder_type" :value="proManufactureOrder.workorderType"/>
            </el-descriptions-item>
            <el-descriptions-item
                label="下发日期"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ proManufactureOrder.moTime }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <ProcessSingle :workorderCode="proManufactureOrder.moCode"></ProcessSingle>
      </el-tabs>
      <!-- 信息展示区域 -->
      <div class="info-container">
        <div class="info-item">单位名称：{{ proManufactureOrder.deptName }}</div>
        <div class="info-item">制表人：</div>
        <div class="info-item">审核人：</div>
        <div class="info-item">签名：</div>
      </div>

      <!-- 单据生成时间 -->
      <div class="date">单据生成时间：{{ proManufactureOrder.createTime }}</div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="print">打 印</el-button>
      <el-button @click="infoOpen = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getManufactureorder } from "@/api/mes/pro/manufactureorder";
import ProcessSingle from '@/components/manufactureorder/single.vue';
import printJS from 'print-js';

export default {
  dicts: ['mes_workorder_sourcetype', 'mes_workorder_type'],
  components: {ProcessSingle, printJS},
  data() {
    return {
      infoOpen: false,
      moId: undefined,
      activeName: 'first',
      tabIndex: 0,
      proManufactureOrder: {},
    };
  },
  methods: {
    print() {
      printJS({
        type: 'html',
        printable: 'printArea',
        documentTitle: '生产制作单',
        header: '生产制作单',
        // 写入自定义样式
        headerStyle: 'text-align:center;width:100%;margin-top:50px;font-weight: 300;',
        style: `@page{ margin: 15mm 15mm 20mm 10mm; }
                            @media print{@page {size:portrait}}


                            .noprint{
                              display:none !important;
                            }`,
        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1920
      });
    },
    init(moId) {
      getManufactureorder(moId).then(response => {
        this.infoOpen = true;
        this.proManufactureOrder = response.data
      });
    },
  }
};
</script>

<style scoped>
.divider-order {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: -10px 0 0 0; /* 上下外边距 */
}

.divider-order::before,
.divider-order::after {
  content: ''; /* 伪元素内容为空 */
  flex: 1; /* 伸展占据剩余空间 */
}

.label-order {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  color: #1b9aee; /* 蓝色字体 */
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  text-align: center;
  line-height: 20px;
}

.info-item span {
  margin-left: 10px;
}

.info-item span:first-child {
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #262626;
  text-align: left;
  line-height: 20px;
  display: inline-block;
  width: 90px;
}


.el-descriptions .is-bordered {
  table-layout: fixed !important;
}

/* 假设所有 label 的最大宽度为 120px */
.el-descriptions-item__label {
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* 使用 Flexbox 布局来控制对齐（可选） */
.el-descriptions-item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

/* 外层容器样式 */
.info-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* 每项信息的样式 */
.info-item {
  flex: 1;
  text-align: left;
  white-space: nowrap; /* 防止换行 */
  font-size: 14px;
  font-weight: bold;
}

/* 签名部分靠右对齐 */
.signature {
  text-align: left;
  margin-top: 20px;
}

/* 时间样式 */
.date {
  text-align: right;
  color: gray;
  font-size: 14px;
  margin-top: 10px;
}

.code {
  text-align: right;
  color: gray;
  font-size: 14px;
  margin-top: -20px;
  margin-bottom: 10px;
  font-weight: bold;
}
</style>
